<template>
  <div class="layerTree">
    <div class="layer-search-contianer">
      <el-input
        ref="layer_filter_input"
        v-model="filterText"
        prefix-icon="el-icon-search"
        clearable
        placeholder="输入图层名称过滤"
      />
    </div>
    <div class="layer-tree-container">
      <!--图层树-->
      <el-tree
        ref="tree2"
        :data="layers"
        :props="defaultProps"
        :default-expanded-keys="[1]"
        :filter-node-method="filterNode"
        class="filter-tree"
        show-checkbox
        render-after-expand
        highlight-current
        node-key="_id"
        @check="nodeCheck"
        :default-checked-keys="checkedIds"
      >
        <span slot-scope="{node,data}">
          <i v-if="!isLayer(node,data)" class="treeGroupIcon kfb-icon-leimu" />
          <i v-else class="treeItemIcon kfb-icon-kehuxinxiliebiao" />
          <span v-if="!isLayer(node,data)" class="treeGroup">{{ node.label }}</span>
          <span
            v-else
            :disabled="true"
            class="treeItem"
            @click="$emit('onLocateTo',data)"
          >{{ node.label }}</span>

          <div style="float:right;margin-top:4px;margin-right:3px;">
            <el-button
              v-if="isQuery(node,data)"
              icon="el-icon-message"
              circle
              @click="$emit('onQuery',data)"
            />
          </div>
          <div style="float:right;margin-top:4px;margin-right:3px;">
            <el-button
              v-if="isEchart(node,data)"
              icon="el-icon-s-data"
              circle
              @click="$emit('onEchart',data)"
            />
          </div>
          <div style="float:right;margin-top:4px;margin-right:3px;">
            <el-button
              v-if="isLegend(node,data)"
              icon="el-icon-picture"
              circle
              @click="$emit('onLegendShow',data)"
            />
          </div>
          <el-slider
            v-if="isSlider(node,data)"
            v-model="data.alpha"
            @change="$emit('onChange',$event,data)"
          />
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    layers: { type: Array, default: [] },
    isQuery: {
      type: Function,
      default: function(node, data) {
        return false;
      }
    },
    isLegend: {
      type: Function,
      default: function(node, data) {
        return false;
      }
    },
    isEchart: {
      type: Function,
      default: function(node, data) {
        return false;
      }
    },
    isLayer: {
      type: Function,
      default: function(node, data) {
        return false;
      }
    },
    isSlider: {
      type: Function,
      default: function(node, data) {
        return false;
      }
    },
    checkedIds: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      filterText: "", // 过滤
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.$refs["layer_filter_input"].focus();
    });
  },
  methods: {
    /**
     * 图层过滤
     * @param value
     * @param data
     * @returns {boolean}
     */
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    /**
     * 控制图层开闭
     * @param data
     * @param Node
     */
    nodeCheck(data, node) {
      this.$emit("onNodeChecked", node, data);
    },

    //
    setCheckedLayers(ids) {
      const keys = this.$refs["tree2"].getCheckedKeys();
      this.$refs["tree2"].setCheckedKeys(ids.concat(keys));
      for (let i = 0; i < ids.length; i++) {
        if (keys.indexOf(ids[i]) > -1) {
          return;
        }
        const node = this.$refs["tree2"].getNode(ids[i]);
        this.$emit("onNodeChecked", node, node.data);
      }
    },

    setCheckedLayerById(id) {
   
      const keys = this.$refs["tree2"].getCheckedKeys();
      const index = keys.indexOf(id);
      const node = this.$refs["tree2"].getNode(id);
      node.checkedKeys = keys;
      if (index == -1) {
        keys.push(id);
        this.$refs["tree2"].setCheckedKeys(keys);
      } else {
        keys.splice(index, 1);
        this.$refs["tree2"].setCheckedKeys(keys);
        
      }
      this.$emit("onNodeChecked", node, node.data);
    }
  }
};
</script>

<style>
.layer-search-contianer .el-input .el-input__inner {
  background: transparent;
  border: 1px solid #1c81be;
  border-radius: 0px;
  padding: 12px 5px 12px 35px;
  color: white;
  height: 47px;
}

.layer-search-contianer .el-input .el-input__prefix .el-input__icon {
  line-height: 50px;
}

.layer-tree-container .el-tree {
  background: transparent;
  color: white;
}

.layer-tree-container .treeGroup {
  color: white;
  font-size: 13px;
}

.layer-tree-container .el-checkbox__inner {
  border-color: #409eff;
  background-color: transparent;
}

.layer-tree-container .treeItem {
  font-size: 13px;
  color: white;
  font-family: "Microsoft YaHei";
}

.layer-tree-container .el-tree-node__children .el-tree-node__content {
  height: auto;
  padding: 2px;
  display: block;
}

.layer-tree-container .el-slider__runway {
  width: 80%;
  margin: 5px 25px;
  height: 3px;
  background-color: forestgreen;
}

.layer-tree-container .el-button.is-circle {
  padding: 2px;
}

.layer-tree-container .el-slider__bar {
  height: 3px;
}

.layer-tree-container .el-slider__button {
  width: 10px;
  height: 10px;
}

.layer-tree-container .el-slider__button-wrapper {
  top: -13px;
  height: 30px;
  width: 30px;
}

.layer-tree-container .el-button {
  font-size: 5px;
  background-color: transparent;
  color: #409eff;
  border: 1px solid #409eff;
}

.layer-tree-container .treeGroupIcon {
  font-size: 16px;
  color: #409eff;
}

.layer-tree-container .treeItemIcon {
  font-size: 13px;
  color: #409eff;
}

/* 设置节点hover时的样式 */
.layerTree .el-tree-node > .el-tree-node__content:hover {
  background-color: #00000043;
}

/* 设置节点选中的样式 */
.layerTree .el-tree-node:focus > .el-tree-node__content {
  background-color: #00000043;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #00000043;
}
</style>

<style scoped>
.layer-search-contianer {
  margin: 15px 5px 15px 5px;
}

.layer-tree-container {
  max-height: 600px;
  overflow-y: auto;
  margin: 15px 5px 15px 5px;
}
</style>

